<template>
    <div class="statistics-region-three">
        <el-row :gutter="24" class="h-full">
            <el-col :span="12">
                <VChart ref="parRef" :option="optionOne"/>
            </el-col>
            <el-col :span="12">
                <VChart ref="parRef" :option="optionTwo"/>
            </el-col>
        </el-row>
    </div>
</template>

<script setup>
import VChart from "vue-echarts";
import {getPatrolCoverage} from "@/api/Dashboard/PatrolStatisticsGreen.js";

const optionOne = ref({
    series: [
        {
            type: 'gauge',
            startAngle: 180,
            endAngle: 0,
            min: 0,
            max: 100,
            splitNumber: 12,
            itemStyle: {
                color: '#004564',
                shadowColor: '#004564',
                shadowBlur: 8,
                shadowOffsetX: 2,
                shadowOffsetY: 2
            },
            progress: {
                show: true,
                roundCap: true,
                width: 10
            },
            pointer: {
                icon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z',
                length: '60%',
                width: 10,
                offsetCenter: [0, '5%']
            },
            axisLine: {
                roundCap: true,
                lineStyle: {
                    width: 10
                }
            },
            axisTick: {
                show: true,
                splitNumber: 2,
                lineStyle: {
                    width: 2,
                    color: '#999'
                }
            },
            splitLine: {
                show: true,
                length: 10,
                lineStyle: {
                    width: 3,
                    color: '#999'
                }
            },
            axisLabel: {
                show: false,
                distance: 20,
                color: '#999',
                fontSize: 8
            },
            title: {
                show: false
            },
            detail: {
                fontSize: 12,
                offsetCenter: [0, '50%'],
                formatter: function (value) {
                    return `巡查规范率：${value}%`;
                },
            },
            center: ["50%", "60%"],
            radius: "100%",
            data: [
                {
                    value: 87
                }
            ]
        }
    ]
});

const optionTwo = ref({
    series: [
        {
            type: 'gauge',
            startAngle: 180,
            endAngle: 0,
            min: 0,
            max: 100,
            splitNumber: 12,
            itemStyle: {
                color: '#004564',
                shadowColor: '#004564',
                shadowBlur: 8,
                shadowOffsetX: 2,
                shadowOffsetY: 2
            },
            progress: {
                show: true,
                roundCap: true,
                width: 10
            },
            pointer: {
                icon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z',
                length: '60%',
                width: 10,
                offsetCenter: [0, '5%']
            },
            axisLine: {
                roundCap: true,
                lineStyle: {
                    width: 10
                }
            },
            axisTick: {
                show: true,
                splitNumber: 2,
                lineStyle: {
                    width: 2,
                    color: '#999'
                }
            },
            splitLine: {
                show: true,
                length: 10,
                lineStyle: {
                    width: 3,
                    color: '#999'
                }
            },
            axisLabel: {
                show: false,
                distance: 20,
                color: '#999',
                fontSize: 8
            },
            title: {
                show: false
            },
            detail: {
                fontSize: 12,
                offsetCenter: [0, '50%'],
                formatter: function (value) {
                    return `巡查覆盖率：${value}%`;
                },
            },
            center: ["50%", "60%"],
            radius: "100%",
            data: [
                {
                    value: 100
                }
            ]
        }
    ]
});

const getData = async () => {
    const res = await getPatrolCoverage()
    optionOne.value.series[0].data[0].value = res.data
}

onMounted(() => getData())
</script>

<style scoped lang="scss">

</style>